<template>
	<div class="AllConfig">
		<div class="ConfigPage">
			<div class="Config">
				<el-card class="PublicSelect">
					<el-row>
						<el-col>
							<span style="padding: 0 15px 0 25px">选择公众号</span>
							<el-select v-model="seachParms.PublicID" placeholder="点击选择" @change="wechatPublicChange" size="large">
								<el-option v-for="(item, publicIndex) in publicList" :key="item.PublicID" :label="item.WechatName" :value="item.PublicID" />
							</el-select>
						</el-col>
					</el-row>
				</el-card>

				<el-card style="margin-top: 30px; flex: 1">
					<el-row>
						<el-col :span="6">
							<div class="LeftPreview">
								<div class="headPre">{{ selectedPublic.WechatName }}<br />{{ selectedPublic.WechatNum }}</div>
								<div class="midPre"></div>
								<div class="footPre">
									<el-row>
										<el-col :span="3">
											<el-image style="height: 40px; width:100% float: left; border: 1px solid #a2a2a2" :src="menuUrl" />
										</el-col>
										<el-col :span="21">
											<el-row>
												<el-col :span="menuItemWidth" style="display: flex">
													<template v-for="(mainItem, mainIdx) in mainMenuList" :key="mainIdx">
														<el-button
															:style="{ flex: 1, 'margin-left': 0, 'border-radius': '0px' }"
															class="menu-item"
															:type="curMenuIdx === mainIdx ? 'primary' : 'info'"
															@click="($event) => mainMenuClick($event, mainItem, mainIdx)"
															>{{ mainItem.MenuName }}</el-button
														>
													</template>
												</el-col>
												<el-col :span="buttonWidth" v-show="mainMenuList.length < 3">
													<el-button type="success" :icon="Plus" style="width: 100%" @click="addMainMenu">添加</el-button>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
								</div>
							</div>
						</el-col>

						<el-col :span="16" v-if="isShowConfig">
							<div class="RightPreview">
								<div class="RightPreviewTop">
									<div class="topCinfig">
										<span>菜单配置</span>
										<!-- 删除一级菜单 -->
										<el-button v-if="state.isCurrentMenu" type="danger" style="float: right" @click="delMenu">删除</el-button>
										<!-- 删除二级菜单 -->
										<el-button v-else type="danger" style="float: right" @click="delMenuItem">删除</el-button>
									</div>
									<div class="mainConfig">
										<div class="mainTop">
											<span class="conTitle">菜单名称：</span>
											<el-input v-model="selectedMenuInfo.MenuName" placeholder="请输入名称" size="default" @input="inputMenuName" />
											<span class="conTip">菜单名称不超过5个汉字</span>
										</div>
										<div v-if="!selectedMenuInfo.children || selectedMenuInfo.children.length === 0" class="mainMid">
											<div class="midT">
												<span class="conTitle" style="float: left">菜单内容：</span>
												<el-radio-group v-model="selectedMenuInfo.MenuType" class="ml-4" @change="changeMenuType">
													<el-radio label="1" size="default">发送消息</el-radio>
													<el-radio label="2" size="default">跳转网页</el-radio>
												</el-radio-group>
											</div>
											<el-space style="width: 100%">
												<el-select
													v-if="selectedMenuInfo.MenuType === '1'"
													class="m-2"
													placeholder="请选择发送的消息"
													style="display: block; margin: 5px auto; width: 96%"
													v-model="selectedMenuInfo.ExecID"
													:filterable="true"
													:remote="true"
													:remote-method="remoteMethod"
													:loading="loading"
													@focus="remoteMethod('')"
												>
													<el-option v-for="(item, index) in wechatExec" :key="index" :label="item.KeyWord" :value="item.ExecID" />
												</el-select>
												<el-input
													v-if="selectedMenuInfo.MenuType === '2'"
													v-model="selectedMenuInfo.LinkUrl"
													class="m-2"
													placeholder="请输入跳转路径"
													style="display: block; margin: 5px auto; width: 96%"
												>
												</el-input>
												<span class="conTip" v-if="selectedMenuInfo.MenuType === '1'">请选择执事件的名称，或<a href="">添新增事件</a></span>
												<span class="conTip" v-else-if="selectedMenuInfo.MenuType === '2'">请选择执事件2的名称，或<a href="">添新增事件</a></span>
											</el-space>
										</div>
										<div class="mainFoot">
											<span class="conTitle" style="float: left; margin-right: 10px">菜单显示顺序</span>
											<template v-if="state.isCurrentMenu">
												<el-button size="small" type="primary" @click="clickToLeft(curMenuIdx)">左移</el-button>

												<el-button size="small" type="primary" @click="clickToRight(curMenuIdx)">右移</el-button>
											</template>
											<template v-else>
												<el-button size="small" type="primary" @click="clickToTop">上移</el-button>

												<el-button size="small" type="primary" @click="clickToBottom">下移</el-button>
											</template>
										</div>
									</div>
								</div>
								<div class="RightPreviewBottom">
									<el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
									<el-button type="primary" @click="handleCreateConfig">创建菜单</el-button>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</div>
		</div>
		<teleport to="body">
			<div
				v-if="state.isShowDropdownMenu"
				class="dropdown-menu"
				:style="{ left: position.x + 'px', top: position.y + 'px', width: state.menuItemElWidth + 'px' }"
			>
				<div v-if="mainMenuList[curMenuIdx].children.length < 5" class="dropdown-menu-item add" @click="addSubMenuItem">
					<el-icon><Plus /></el-icon>添加
				</div>
				<div
					v-for="(subItem, subIdx) in mainMenuList[curMenuIdx].children"
					:key="subIdx"
					class="dropdown-menu-item"
					:class="{ active: state.curSubMenuIdx === subIdx }"
					@click="menuItemClick(subIdx, subItem)"
				>
					{{ subItem.MenuName }}
				</div>
			</div>
		</teleport>
	</div>
</template>

<script lang="ts" setup>
import menuUrl from '/@/assets/image/menu.png';
import { httpReqeustApi } from '/@/api/linxyun/base';
import { cloneDeep } from 'lodash';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserInfo } from '/@/stores/userInfo';
import { getTextByteLength } from '/@/utils/extendMethods';
enum EMenuType {
	Event = '1',
	LinkUrl = '2',
}
enum IsMainMenuEnum {
	Main = 1,
	Sub = 0,
}
const state = reactive<Record<string, any>>({
	value: '',
	// 保存查询到的所有微信
	publicList: [],
	// 保存当前选中的微信
	selectedPublic: { WechatID: '', WechatName: '' },
	selectedMenuInfo: { MenuName: '', MenuID: '' },
	curMenuIdx: null,
	curSubMenuIdx: null,
	mainMenuList: [],
	menuItemWidth: 0,
	buttonWidth: 24,
	wechatExec: [],
	queryParams: {
		current: 1,
		limit: 20,
		total: 0,
	},
	seachParms: {
		// 微信众号id
		PublicID: '',
	},
	checkIndex: 999,
	liWidth: 1,
	countLi: 1,
	position: {
		x: 0,
		y: 0,
	},
	menuItemElWidth: 0,
	isShowDropdownMenu: false,
	isCurrentMenu: false,
	isShowConfig: false,
	userID: '',
	loading: false,
	deleteMenuList: [],
	wechatpPublic: {},
});
const {
	queryParams,
	seachParms,
	menuItemWidth,
	wechatExec,
	curMenuIdx,
	buttonWidth,
	publicList,
	selectedPublic,
	mainMenuList,
	selectedMenuInfo,
	position,
	isShowConfig,
	loading,
	wechatpPublic,
} = toRefs(state);

const httpRequest = httpReqeustApi();
const userInfoStore = useUserInfo();
const init = () => {
	const params = {
		...seachParms.value,
		current: queryParams.value.current,
		limit: queryParams.value.limit,
	};
	console.log('query_wx_public', params);
	httpRequest.Get('query_wx_public', params).then((res: any) => {
		console.log('query_wx_public', res);
		if (res.success && res.Records) {
			publicList.value = [];
			publicList.value.push(...res.Records);
		} else {
			// TODO
			console.log('提示错误');
		}
	});
	state.userID = userInfoStore.userInfos?.UserID;
};
const queryMenuConfig = () => {
	mainMenuList.value = [];
	httpRequest.Get('query_wechat_menu', { PublicID: seachParms.value.PublicID }).then((res) => {
		if (res.success && res.Records) {
			console.log('queryMenuConfig', res.Records);
			for (let index = 0; index < res.Records.length; index++) {
				const item = res.Records[index];
				console.log('menu', item);
				if (item.IsMainMenu === '1' && item.MenuIndex[1] === '1') {
					mainMenuList.value.push({ ...item, children: [] });
				} else if (item.IsMainMenu === '0') {
					if (!mainMenuList.value[item.MenuIndex[0]].children) {
						mainMenuList.value[item.MenuIndex[0]].children = [];
					}
					mainMenuList.value[item.MenuIndex[0] - 1].children.push(item);
				}
			}
			if (mainMenuList.value.length === 3) {
				menuItemWidth.value = 24;
				buttonWidth.value = 0;
			} else {
				menuItemWidth.value = (24 / (mainMenuList.value.length + 1)) * mainMenuList.value.length;
				buttonWidth.value = 24 - menuItemWidth.value;
			}
		}
	});
};
const queryWechatExec = (params: Record<string, any> = {}) => {
	if (!wechatpPublic.value?.WechatId) return ElMessage.error('WechatId为空');
	params['WechatID'] = wechatpPublic.value?.WechatId;

	httpRequest.Get('queryWechatExec', params).then((res) => {
		if (!res.success && !res.Records) {
			return ElMessage.error('查询事件响应失败');
		}
		wechatExec.value = res.Records || [];
	});
};
const remoteMethod = (query: string) => {
	console.log('remoteMethod', query);
	loading.value = true;
	queryWechatExec({ KeyWord: query || '' });
	loading.value = false;
};
init();
// 添加一级菜单
const addMainMenu = () => {
	if (seachParms.value.PublicID.length === 0) {
		console.log('请选择公众号');
		ElMessage.error('请选择公众号');
	} else {
		state.position = {
			x: 0,
			y: 0,
		};
		state.isShowDropdownMenu = false;
		const mainItem = {
			MenuIndex: mainMenuList.value.length + 1 + '' + 1,
			MenuName: '新增' + (mainMenuList.value.length + 1),
			children: [],
		};
		mainMenuList.value.push(mainItem);
		if (mainMenuList.value.length === 3) {
			menuItemWidth.value = 24;
			buttonWidth.value = 0;
		} else {
			menuItemWidth.value = (24 / (mainMenuList.value.length + 1)) * mainMenuList.value.length;
			buttonWidth.value = 24 - menuItemWidth.value;
		}
	}
};

const mainMenuClick = (e: MouseEvent, item: Record<string, any>, mainIdx: number) => {
	state.position = {
		x: 0,
		y: 0,
	};
	if (seachParms.value.PublicID.length === 0) {
		console.log('请选择公众号');
		ElMessage.error('请选择公众号');
	}
	if (state.curMenuIdx === mainIdx) {
		state.isShowDropdownMenu = !state.isShowDropdownMenu;
	} else {
		state.isShowDropdownMenu = true;
	}
	selectedMenuInfo.value = item;
	state.curMenuIdx = mainIdx;
	state.curSubMenuIdx = null;
	state.isCurrentMenu = true;
	isShowConfig.value = true;
	nextTick(() => {
		getDropdownMenuPosition();
	});
};

const menuItemClick = (mainIdx: number, item: Record<string, any>) => {
	selectedMenuInfo.value = item;
	state.curSubMenuIdx = mainIdx;
	state.isCurrentMenu = false;
	isShowConfig.value = true;
};

// 添加二级菜单
const addSubMenuItem = () => {
	if (isNaN(state.curMenuIdx)) {
		// TODO
		//提示错误
	} else {
		console.log('addSubMenuItem: ', mainMenuList.value[state.curMenuIdx].children);
		const subItem = {
			MenuIndex: state.curMenuIdx + 1 + '' + (mainMenuList.value[state.curMenuIdx].children.length + 1),
			MenuName: '子菜单' + (mainMenuList.value[state.curMenuIdx].children.length + 1),
		};
		mainMenuList.value[state.curMenuIdx].children.unshift(subItem);
		console.log('addSubMenuItem: ', mainMenuList.value[state.curMenuIdx].children);
		const menuItem = document.getElementsByClassName('dropdown-menu-item');
		let idx = 0;
		if (menuItem.length > 1) idx = 1;
		console.log('menuItem clientHeight', [menuItem[idx]]);
		if (mainMenuList.value[state.curMenuIdx].children.length < 5) {
			state.position.y -= menuItem[idx]?.clientHeight || 0;
		}
		if (state.curSubMenuIdx !== null) {
			state.curSubMenuIdx += 1;
		}
	}
};
// 删除一级菜单
const delMenu = () => {
	console.log('delMenu', state.curMenuIdx);
	ElMessageBox.confirm('确定要删除当前菜单？', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			if (state.curMenuIdx === null) return;
			const menuItem = state.mainMenuList[state.curMenuIdx];
			// 二级菜单 有 MenuID 就保存到删除列表
			if (menuItem.MenuID) {
				state.deleteMenuList.push(menuItem);
			}
			// 二级菜单 有 MenuID 就保存到删除列表
			if (menuItem.children?.length) {
				for (let index = 0; index < menuItem.children.length; index++) {
					const menuItem2 = menuItem.children[index];
					if (menuItem2.MenuID) {
						state.deleteMenuList.push(menuItem2);
					}
				}
			}
			state.mainMenuList.splice(state.curMenuIdx, 1);
			state.curMenuIdx = null;
			selectedMenuInfo.value = {};
			state.isShowDropdownMenu = false;
			isShowConfig.value = false;
			invertedSetMenuIndex(state.mainMenuList, 1);
			if (mainMenuList.value.length === 3) {
				menuItemWidth.value = 24;
				buttonWidth.value = 0;
			} else {
				menuItemWidth.value = (24 / (mainMenuList.value.length + 1)) * mainMenuList.value.length;
				buttonWidth.value = 24 - menuItemWidth.value;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消',
			});
		});
};
// 删除二级菜单
const delMenuItem = () => {
	if (state.curMenuIdx === null || state.curSubMenuIdx === null) return;

	ElMessageBox.confirm('确定要删除当前菜单？', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			const menu = state.mainMenuList[state.curMenuIdx].children[state.curSubMenuIdx];
			// 有 MenuID 就保存到删除列表
			if (menu.MenuID) {
				state.deleteMenuList.push(menu);
			}
			state.mainMenuList[state.curMenuIdx].children.splice(state.curSubMenuIdx, 1);
			state.curSubMenuIdx = null;
			selectedMenuInfo.value = {};
			// state.isShowDropdownMenu = false;
			isShowConfig.value = false;
			const menuItem = document.getElementsByClassName('dropdown-menu-item');
			let idx = 0;
			if (menuItem.length > 1) idx = 1;
			if (state.mainMenuList[state.curMenuIdx].children.length < 4) {
				state.position.y += menuItem[idx]?.clientHeight || 0;
			}
			invertedSetMenuIndex(state.mainMenuList[state.curMenuIdx].children, 2);
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消',
			});
		});
};
// 一级菜单的左移
const clickToLeft = (checkindex: number) => {
	console.log('clickToLeft', checkindex);
	if (checkindex === 0) {
		return ElMessage.warning('已经是最左边了');
	}
	state.curMenuIdx = checkindex - 1;
	const mainMenu = cloneDeep(state.mainMenuList[checkindex]);
	state.mainMenuList.splice(checkindex, 1); // 删除
	state.mainMenuList.splice(state.curMenuIdx, 0, mainMenu); // 添加

	selectedMenuInfo.value = mainMenu;
	invertedSetMenuIndex(state.mainMenuList, 1);
};
// 一级菜单的右移
const clickToRight = (checkindex: number) => {
	console.log('clickToRight', checkindex);
	if (checkindex === state.mainMenuList.length - 1) {
		return ElMessage.warning('已经是最右边了');
	}
	const mainMenu = cloneDeep(state.mainMenuList[checkindex]);
	state.mainMenuList.splice(checkindex, 1); // 删除
	state.mainMenuList.splice(checkindex + 1, 0, mainMenu); // 添加
	state.curMenuIdx = checkindex + 1;
	selectedMenuInfo.value = mainMenu;
	invertedSetMenuIndex(state.mainMenuList, 1);
};

// 二级菜单的上移
const clickToTop = () => {
	if (state.curSubMenuIdx === 0) {
		return ElMessage.warning('已经是最上边了');
	}
	const mainMenuItem = cloneDeep(state.mainMenuList[state.curMenuIdx].children[state.curSubMenuIdx]);
	state.mainMenuList[state.curMenuIdx].children.splice(state.curSubMenuIdx, 1); // 删除
	state.mainMenuList[state.curMenuIdx].children.splice(state.curSubMenuIdx - 1, 0, mainMenuItem); // 添加
	state.curSubMenuIdx = state.curSubMenuIdx - 1;
	selectedMenuInfo.value = mainMenuItem;
	invertedSetMenuIndex(state.mainMenuList[state.curMenuIdx].children, 2);
};

// 二级菜单的下移
const clickToBottom = () => {
	if (state.curSubMenuIdx === state.mainMenuList[state.curMenuIdx].children.length - 1) {
		return ElMessage.warning('已经是最下边了');
	}
	const mainMenuItem = cloneDeep(state.mainMenuList[state.curMenuIdx].children[state.curSubMenuIdx]);
	state.mainMenuList[state.curMenuIdx].children.splice(state.curSubMenuIdx, 1); // 删除
	state.mainMenuList[state.curMenuIdx].children.splice(state.curSubMenuIdx + 1, 0, mainMenuItem); // 添加
	state.curSubMenuIdx = state.curSubMenuIdx + 1;
	selectedMenuInfo.value = mainMenuItem;
	invertedSetMenuIndex(state.mainMenuList[state.curMenuIdx].children, 2);
};

const wechatPublicChange = (e: any) => {
	console.log('wechatPublicChange e', e);
	if (e) {
		wechatpPublic.value = publicList.value.find((wp) => {
			return wp.PublicID === e;
		});
		queryMenuConfig();

		queryWechatExec();
	}
};

const changeMenuType = (val: any) => {
	// 当切换成事件消息时，需要从数据库中查询公司下的所有事件，搜索查询
	console.log(val);
};
// 保存配置
const handleSaveConfig = () => {
	console.log('handleSaveConfig');
	const allQuery: Promise<any>[] = [];
	for (let index = 0; index < state.deleteMenuList.length; index++) {
		const delMenuItem = state.deleteMenuList[index];
		if (delMenuItem.MenuID) {
			allQuery.push(httpRequest.Post('/lxy_contact/delete_wechat_menu.action', {}, { MenuID: delMenuItem.MenuID }));
		}
	}
	for (let index = 0; index < state.mainMenuList.length; index++) {
		const menu: Record<string, any> = state.mainMenuList[index];
		handlerAddOrUpdateMenu(menu, allQuery, IsMainMenuEnum.Main, menu.children.length && true);
		if (menu.children.length) {
			for (let index2 = 0; index2 < menu.children.length; index2++) {
				const menuItem: Record<string, any> = menu.children[index2];
				handlerAddOrUpdateMenu(menuItem, allQuery, IsMainMenuEnum.Sub);
			}
		}
	}
	Promise.allSettled(allQuery).then((resList) => {
		const errList: PromiseSettledResult<any>[] = [];
		const bool = resList.every((res: any) => {
			if (!res.value.success) {
				errList.push(res);
			}
			return res.value.success;
		});
		if (bool) {
			ElMessage.success('保存配置成功');
		}
		if (errList.length) {
			ElMessage.success('部分配置保存失败');
			console.error('部分配置保存失败', errList);
		}
	});
};
const handlerAddOrUpdateMenu = (
	menu: Record<string, any>,
	allQuery: Promise<any>[],
	IsMainMenu: IsMainMenuEnum = IsMainMenuEnum.Main,
	IsExistSubMenu: boolean = false
) => {
	if (!seachParms.value.PublicID) {
		return ElMessage.warning('请选择公众号');
	}
	const params: Record<string, any> = {
		PublicID: seachParms.value.PublicID,
		MenuName: menu.MenuName,
		MenuIndex: menu.MenuIndex,
		MenuType: menu.MenuType,
		IsMainMenu: IsMainMenu,
		IsUsed: '',
	};
	if (!IsExistSubMenu && menu.MenuType === EMenuType.Event) {
		params.ExecID = menu.ExecID;
	} else if (!IsExistSubMenu && menu.MenuType === EMenuType.LinkUrl) {
		params.LinkUrl = menu.LinkUrl;
	}
	// 修改
	if (menu.MenuID) {
		params.MenuID = menu.MenuID;
		params.UpdateUserID = state.userID;
		allQuery.push(httpRequest.Post('/lxy_contact/update_wechat_menu.action', {}, params));
		return;
	}
	// 添加
	params.CreateUserID = state.userID;
	allQuery.push(httpRequest.Post('/lxy_contact/add_wechat_menu.action', {}, params));
};

const invertedSetMenuIndex = (menuList: Record<string, any>[], level: 1 | 2 = 1) => {
	if (![1, 2].includes(level)) {
		ElMessage.error('重排等级不合法');
		return;
	}
	let num = 1;
	if (level === 2) {
		num = menuList.length;
	}

	menuList.forEach((menu: Record<string, any>, index) => {
		if (level === 2) {
			menu.MenuIndex = menu.MenuIndex[0] + '' + num;
			num--;
		} else if (level === 1) {
			menu.MenuIndex = num + '1';
			num++;
		}
	});
};

const inputMenuName = (val: string) => {
	if (val) {
		let newText = '';
		let textByteLength = 0;
		const length = getTextByteLength(val);
		if (length > 16) {
			for (let index = 0; index < val.length; index++) {
				const str = val[index];
				const len = getTextByteLength(str);
				if (textByteLength <= 16 && textByteLength + len <= 16) {
					newText += str;
					textByteLength += len;
				} else {
					break;
				}
			}
			selectedMenuInfo.value.MenuName = newText;
		}
	}
};
onMounted(() => {
	console.log('onMounted');
	window.addEventListener(
		'scroll',
		() => {
			console.log('scroll', state.curMenuIdx);
			if (state.curMenuIdx !== null) {
				getDropdownMenuPosition();
			}
		},
		true
	);
});

// 获取菜单位置
const getDropdownMenuPosition = () => {
	const dropdownMenuEl = document.querySelector('.dropdown-menu');
	const menuItemElAll = document.querySelectorAll('.menu-item'); // 一级菜单
	state.menuItemElWidth = menuItemElAll[state.curMenuIdx]?.clientWidth;
	const el = menuItemElAll[state.curMenuIdx] as HTMLDivElement;
	console.log('el', el);
	setTimeout(() => {
		const elBoundingObj = el.getBoundingClientRect();
		const dropdownMenuElObj = dropdownMenuEl?.getBoundingClientRect();
		state.position.x = elBoundingObj.x;
		state.position.y = elBoundingObj.y - ((dropdownMenuElObj?.height || 0) + 15);
	});
};

const handleCreateConfig = () => {
	if (!wechatpPublic.value?.WechatId) return ElMessage.error('WechatId为空');
	httpRequest.Post('create_wechat_menu', {}, { PublicID: state.seachParms.PublicID, WechatId: wechatpPublic.value?.WechatId }).then((res) => {
		console.log('handleCreateConfig', res);
	});
};
</script>

<style scoped lang="scss">
.AllConfig {
	margin-top: 30px;
	/* width: 80%; */
}

.ConfigPage {
	/* border: 1px solid gray; */
	overflow: hidden;
}

.ConfigPage .AllConfigWord2 {
	padding-left: 20px;
	height: 40px;
	width: 100%;
	line-height: 40px;
	background-color: #e2e2e2;
	/* border: 1px solid gray; */
}

.Config {
	/* border: 1px solid gray; */
	height: 800px;
	display: flex;
	flex-direction: column;
}

/* .Config .PublicSelect select {
	height: 40px;
	width: 100px;
} */

/* .PublicSelect {
	margin-top: 20px;
} */

.LeftPreview {
	border: #e2e2e2 1px solid;
	background-color: #fff;
	margin-top: 30px;
	width: 320px;
	/* float: left; */
	/* height: 500px; */
	margin-left: 20px;
}

.RightPreviewTop,
.RightPreviewBottom {
	margin-top: 30px;
	width: 88%;
}

.RightPreviewBottom el-button:active {
	color: var(--next-color-primary-lighter);
}

.RightPreviewTop {
	background-color: #fff;
}

.RightPreviewTop {
	border: #e2e2e2 1px solid;
}

.mainConfig {
	margin-bottom: 30px;
}

.topCinfig {
	height: 50px;
	width: 100%;
	line-height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
}
.topCinfig el-button:active {
	color: var(--next-color-warning-lighter);
}

.topCinfig,
.headPre {
	background-color: var(--next-table-head-bg-color);
	color: var(--next-table-head-color);
}

.mainTop,
.mainMid,
.mainFoot {
	padding: 5px;
	// margin-top: 20px;
}
.mainFoot {
	display: flex;
	align-items: center;
}
.mainMid {
	.midT {
		display: flex;
		align-items: center;
	}
}
.mainTop el-input {
	margin: 5px;
}

.conInput,
.conTitle,
.conSel {
	margin: 5px;
	float: left;
}

.conInput {
	display: block;
	margin: 5px auto;
	height: 25px;
	line-height: 25px;
	width: 95%;
	text-indent: 0.5em;
}

.conTitle {
	font-weight: 700;
}

.conTitle el-button:active {
	color: var(--next-color-primary-lighter);
}
/*
.conSel {
	display: block;
	height: 30px;
	line-height: 30px;
	margin: 15px auto;
	width: 94%;
} */

.conTip {
	color: #a2a2a2;
	font-size: 10px;
}

.conTip a {
	text-decoration: none;
	color: #17bccb;
}

/* .topCinfig button {
	float: right;
	height: 30px;
	width: 50px;
	margin: 10px 40px 10px 10px;
} */

.headPre {
	/* width: auto;
	background-color: #e2e2e2; */
	text-align: center;
	padding: 15px;
}

.midPre {
	/* height: 70%; */
	height: 385px;
	/* background-color: #aaffff; */
}

.footPre {
	width: 100%;
}

.allUl ul {
	display: inline-flex;
	flex-direction: column-reverse;
}

.allUl ul li {
	/* float: left; */
	border: 1px solid #a2a2a2;
	padding: 10px 0 10px 0;
	/* width: 24.35%; */
	text-align: center;
	height: 40px;
	justify-content: end;
}

.footPre ul li:hover {
	background-color: var(--next-bg-menuBarColor);
	cursor: pointer;
}

.firMenu {
	width: 78px;
	background: url('../../../../assets/image/menu.png') no-repeat center;
	vertical-align: middle;
	background-size: contain;
}
/* .addLi {
	width: 80px;
} */

.isClick {
	color: var(--el-menu-active-color);
}

.dropdown-menu {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: #fff;
	box-shadow: var(--el-box-shadow-light);

	.dropdown-menu-item {
		padding: 10px;
		cursor: pointer;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		&.active {
			background-color: var(--el-color-primary);
			color: var(--next-color-white);
		}
	}
}
</style>
